<?xml version="1.0" encoding="windows-1252"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>MeteoCal</title>
        <link type="text/css" rel="stylesheet" href="resources/css/login.css" />
        <link href='http://fonts.googleapis.com/css?family=Pacifico|Days+One' rel='stylesheet' type='text/css' />
    </h:head>
    <h:body>
        <div id="header" >
            <img id="logo" src="resources/images/logo.png"/>
            <h:form>
                    <p:growl id="msgs" showDetail="true" />
                    <p:panelGrid id="panel" columns="3" >
                        
                        <p:inputText styleClass="widg" placeholder="Login" id="Name" value="#{LoginBean.username}" 
                                    required="true" />

                        
                        <p:password styleClass="widg" placeholder="Password" id="Password" value="#{LoginBean.password}" />
                        
                        <p:commandButton update="panel" value="Login" 
                                     action="#{LoginBean.login()}"/>
                        
                    </p:panelGrid>
            </h:form>
         </div> 
        <div>
        <div class="container">
           <div id="content-slider">
              <div id="slider">  <!-- Slider container -->
                 <div id="mask">  <!-- Mask -->
                 <img class="firstanimation" src="resources/images/5.jpg" />
                 <img class="secondanimation" src="resources/images/4.jpg" />
                 <img class="thirdanimation" src="resources/images/2.jpg" />
                 <img class="fourthanimation" src="resources/images/1.jpg" />
                 <img class="fifthanimation" src="resources/images/3.jpg" />
                 </div>  <!-- End Mask -->
              </div>  <!-- End Slider Container -->
           </div>
        </div>
        <p:outputLabel styleClass="labelintro">
            <br>Your Events.</br>
            <br>Your Passions.</br>
            <br>Your <p:outputLabel style="font-family: 'Pacifico', cursive; font-size: 60px; color: #ff9999; text-shadow: 2px 2px #ffffff"> Life.</p:outputLabel></br>
        </p:outputLabel>  
            <h:form id="form">
                <p:growl id="msgs" showDetail="false" />

                <p:panel header="Sign Up! It's free :)" styleClass="widgbk">
                    <h:panelGrid columns="2">

                        <p:outputLabel for="name" value="Name" />
                        <p:inputText placeholder="Name" required="true" id="name" value="#{registrationBean.user.name}">
                            
                        </p:inputText>

                        <p:outputLabel for="surname" value="Surname" />
                        <p:inputText placeholder="Surname" required="true" id="surname" value="#{registrationBean.user.surname}">
                            
                        </p:inputText>

                        <p:outputLabel for="gender" value="Gender" />
                        <p:selectOneRadio required="true" id="gender" value="#{registrationBean.user.gender}">
                            <f:selectItem itemLabel="Male" itemValue="Male" />
                            <f:selectItem itemLabel="Female" itemValue="Female" />
                        </p:selectOneRadio>
                        
                        <p:outputLabel for="DOB" value="DOB" />
                        <p:calendar placeholder="Date of Birth" mask="true" required="true" id="DOB" 
                                    value="#{registrationBean.user.dateOfBirth}" navigator="true" pattern="dd/mm/yyyy" 
                                    maxdate="#{registrationBean.dateOfBirth()}" yearRange="1900:2005"/>

                        <p:outputLabel for="livignPlace" value="Living Place" />
                        <p:inputText placeholder="Living Place" required="true" id="livignPlace" value="#{registrationBean.user.livingPlace}" />


                        <p:outputLabel value="Public Calendar" for="PublicPrivate" />
                        <p:selectBooleanButton required="true" id="PublicPrivate" value="#{registrationBean.schedule.public1}" onLabel="Yes" offLabel="No" />
                        
                        <p:outputLabel for="email" value="Email" />
                        <p:inputText placeholder="Email" required="true" id="email" value="#{registrationBean.user.email}" validatorMessage="Invalid email format" >
                           <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
 
                        </p:inputText>
                        

                        <p:outputLabel for="password" value="Password" />
                        <p:password placeholder="Password" id="password" value="#{registrationBean.user.password}"
                                    feedback="true" match="pwd2" label="Password"/>
                        

                        <p:outputLabel for="pwd2" value="Confirm Password" />
                        <p:password placeholder="Confirm Password" id="pwd2" label="Confirm Password"/>
                        
                        <p:outputLabel value="" />
                        <p:commandButton value="Register" update="msgs form" action="#{registrationBean.register()}" icon="ui-icon-check" />
                        
                    </h:panelGrid>
                </p:panel>
            </h:form>
        </div>
    </h:body>
</html>
